<script lang="ts">
export const GuidePopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./GuidePop.vue')),
  {
    title: toRef(() => ''),
    wrapClassName: 'ant-cover__Modal-drawer ant-cover__Modal-install-app __screen-drawer',
    centered: true,
    footer: null,
  },
);
</script>

<script setup lang="ts">
const props = defineProps<{}>();
</script>

<template>
  <div class="mt-6 text-sm">
    <div v-if="envs.isIos" class="text-center text-sys-text-head">
      <div class="flex-center gap-2">
        <span class="text-5.5 font-900">ios</span>
        <i class="i-local:ios-icon?mask text-5" />
      </div>
      <div class="grid mb-4 gap-4">
        <div class="text-sys-text-head">
          <p class="font-500">
            Safari Browser
          </p>
        </div>
      </div>
      <img src="../pic/p-ios.png" alt="" class="h-full w-full">
    </div>

    <div v-else class="grid gap-7.5 text-center text-4">
      <div class="grid gap-4">
        <div class="text-sys-text-head">
          <div class="flex-center gap-2">
            <span class="text-5.5 font-900">Android</span>
            <i class="i-local:android?mask text-5" />
          </div>
          <p class="mt-2.5 font-500">
            Google Chrome
          </p>
          <img src="../../install-app/imgs/android-1.png" class="mt-2.5 h-27.5">
        </div>

        <div class="flex gap-3 text-left">
          <i class="icon i-local:install--m-1 block" /> {{ $t('d899lkkkuaskdZ4BaNspC') }}
        </div>
        <div class="flex gap-3 text-left">
          <i class="icon i-local:install--m-2 block" /> {{ $t('xnvv3HIdi5pPNh75tyruI') }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:global(.ant-cover__Modal-install-app .ant-modal-content) {
  background: radial-gradient(69.61% 36.39% at 50% 0%, rgba(132, 138, 157, 0.5) 0%, rgba(38, 39, 46, 0) 100%);
}
</style>
